<script setup>
import { inject } from "vue";
import { userInfo } from "@/state/user.js";
import "@material/web/icon/icon.js";
import "@material/web/iconbutton/icon-button.js";

const drawerOpened = inject("drawerOpened");
const toggleDrawer = inject("toggleDrawer");
</script>

<template>
  <md-icon-button :class="{ hidden: userInfo == null }" @click="toggleDrawer">
    <md-icon>{{ drawerOpened ? "menu_open" : "menu" }}</md-icon>
  </md-icon-button>
</template>

<style scoped>
md-icon-button {
  height: 40px;
  width: 40px;
  opacity: 1;
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-short2);
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

md-icon-button.hidden {
  opacity: 0;
}
</style>
